Day 10 CSS Selector 最後一趴

2022 iThome 鐵人賽

DAY 10

自我挑戰組

一趟30天網頁設計的學習冒險＃explain like i‘m five 系列第 10 篇

14th鐵人賽 html

candy82202

2022-09-25 23:35:59

552 瀏覽

分享至

前言

CSS選擇器來到第三篇了，沒想到讓頭腦打結的規則越來愈複雜，花了好一段時間好好理解跟運用這些選擇器的規則。

Part.3 介紹的基本選擇器如下

Descendant Selector 後代選擇器
Pseudo Class 虛擬類別
Pseudo Element 偽元素

Descendant Selector 後代選擇器

將父層元素下的子層元素選取起來，統一更改樣式。

（上面的定義對初學者來說，嗯～相當的…文言文）

換個方式來說說，我們在前幾天學習了HTML的< head >跟< body >的標籤，在裡面放了很多各種類的標籤，在裡面的就會像是他們的孩子一樣，像是< p >或是 < a >標籤等等的。

舉例：

父標籤< head >、< body >

子標籤< p >、< a >

格式如下：

元素名稱 子層元素名稱{ 宣告; }

HTML的程式碼如下：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>相關網站連結</h1>
    <div class="link1">
      <a href="https://google.com">Google</a>
      <br />
      <a href="https://youtube.com">Youtube</a>
    </div>
    <div class="link2">
      <a href="https://facebook.com">facebook</a>
    </div>
  </body>
</html>

原本CSS檔案還沒輸入更改樣式以前，在網站上的呈現是這樣的。

當我們一旦在連結CSS檔案，想讓父元素< div . link1 >裡面的子層元素< a >元素更改顏色跟字體大小的話，程式碼如下：

div.link1 a {
  color: rosybrown;
  font-size: 3rem;
}

可以看到只有Google跟Youtube字體顏色跟大小有變更而已，facebook雖然有< div . link >也有< a >標籤，但因為< class >是link2不是link1，所以才沒有跟著變色。

Pseudo Class 虛擬類別

Pseudo意思是假的，偽裝的意思。那Class就是類別。

顧名思義就是用虛擬的類別來當成選擇器的名稱，代表選擇器可以針對元件的狀態或特徵來進行操作選擇。

使用者互動類型，會使用「：」來開頭

我們使用前幾天教的< textarea >標籤，使用Pseudo Class裡面的< hover >，只要讓游標移到< textarea >上方，背景就會變色。

textarea:hover {
  background-color: rgb(161, 178, 230);
}

Pseudo Element 偽元素

偽元素是附加到選擇器後的關鍵字，允許對被選擇原色一些特定的地方修改樣式。

p::first-line {
  font-size: 3rem;
}

<body>
    <p>9/25 電影首映會</p>
    <form action="">
      <label for="name">參與人員：</label>
      <br />
      <input
        minlength="2"
        maxlength="50"
        id="name"
        type="text"
        name="InputName"
        placeholder="請輸入真實姓名"
        required
      />
      <br />
      <label for="suggest">回饋建議表單：</label>
      <br />
      <textarea
        name="suggest"
        placeholder="請在此輸入建議"
        rows="7"
        cols="20"
      ></textarea>
    </form>
  </body>

運用上面Pseudo Class跟Pseudo Element的例子。

然後游標移到回饋表單的上面就會自動變色～